<script setup>

import {ref} from "vue";

const treeNodeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'label',
}
const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
const getFullCheckKeys = () => {
  console.log(treeNodeRef.value.getCheckedKeys())
}
const getHalfCheckKeys = () => {
  console.log(treeNodeRef.value.getHalfCheckedKeys())
}
</script>

<template>
  <el-tree
      ref="treeNodeRef"
      style="max-width: 600px"
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :props="defaultProps"
  />
  <div class="buttons">
    <el-button @click="getFullCheckKeys">getFullCheckKeys</el-button>
    <el-button @click="getHalfCheckKeys">getHalfCheckKeys</el-button>
  </div>
</template>

<style lang="scss" scoped>
.login-form {
  width: 260px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px slategrey;

  .login-btn {
    width: 100%;
  }

  .login-title {
    font-size: 19px;
    text-align: center;
    margin-bottom: 10px;
  }

  .check-code {
    display: flex;

    .input {
      margin-right: 5px;
      width: 55%;
    }

    .pic {
      cursor: pointer;
      height: 30px;
      flex: 1;
    }
  }
}
</style>
